{% extends 'basic/component.html' %}
{% load i18n %}
{% load static %}

{% block pageTitle %}
{% trans 'My Information' %}
{% endblock %}


{% block pageHeadExtra %}
    <link href="{% static 'css/accounts/my_info.css' %}" rel="stylesheet">
{% endblock %}


{% block pageBody %}
<div class="container">
    <div class="title">
        <div class="row top">
            <div class="col-md-4">
            </div>
            <div class="col-md-4">
                <div class="self_img">
                    <img src="{{ request.user.get_normal_avatar_uri }}"
                         class="avatar img-circle img-responsive" alt="{{ request.user.username }}">
                </div>
            </div>
            <div class="col-md-4">
            </div>
        </div>
        <div class="row bottom">
            <div class="col-md-4">
            </div>
            <div class="col-md-4">
                <div class="self_name">
                    <p>{{ request.user.username }}</p>
                </div>
            </div>
            <div class="col-md-4">
            </div>
        </div>
    </div>
    <span class="self_span"></span>
    <div class="content">
        <div class="row">
            <div class="col-md-3">
                <ul class="nav nav-pills nav-stacked">
                    <li class="active">
                        <a href="#info" data-toggle="tab">{% trans 'My Information' %}</a>
                    </li>
                    <li>
                        <a href="#avatar" data-toggle="tab">{% trans 'My Avatar' %}</a>
                    </li>
                    <li>
                        <a href="#unread" data-toggle="tab">
                            {% trans 'Unread notifications' %}
                            <span class="badge badge-light pull-right">9</span>
                        </a>
                    </li>
                    <li>
                        <a href="#read" data-toggle="tab">
                            {% trans 'Read notifications' %}
                            <span class="badge badge-light pull-right"></span>
                        </a>
                    </li>
                </ul>
            </div>{# col-3 #}
            <div class="col-md-9">
                <div class="profile-content">
                <div class="tab-content">
                    <div class="tab-pane active" id="info">
                        <form id="me-form" class="form-horizontal" role="form">
                            <div class="form-group">{# username #}
                                <label class="col-md-4 control-label">{% trans 'Username' %}</label>
                                <div class="col-md-8">
                                    <input class="form-control" id="username" type="text" placeholder="{{ request.user.username }}" disabled>
                                </div>
                            </div>
                            <div class="form-group">{# role #}
                                <label class="col-sm-4 control-label">{% trans 'Role' %}</label>
                                <div class="col-sm-8">
                                    <input class="form-control" id="role" type="text" placeholder="{{ request.user.role_description }}" disabled>
                                </div>
                            </div>
                            <div class="form-group">{# real name #}
                                <label for="real_name" class="col-sm-4 control-label">{% trans 'Real name' %}</label>
                                <div class="col-sm-8">
                                    <input class="form-control" id="real_name" name="real_name" type="text" value="{{ request.user.real_name }}">
                                </div>
                            </div>
                            <div class="form-group">{# institution #}
                                <label for="institution" class="col-sm-4 control-label">{% trans 'Institution' %}</label>
                                <div class="col-sm-8">
                                    <input class="form-control" id="institution" name="institution" type="text" value="{{ request.user.institution }}">
                                </div>
                            </div>
                            <div class="form-group">{# email #}
                                <label for="email" class="col-sm-4 control-label">{% trans 'Email address' %}</label>
                                <div class="col-sm-8">
                                    <div class="input-group">
                                        <input id="email" name="email" class="form-control" type="text" value="{{ request.user.email }}">
                                        {% if request.user.email_verified %}
                                            <span class="input-group-addon verified-status">{% trans 'Verified' %}</span>
                                        {% else %}
                                            <span class="input-group-addon unverified-status">{% trans 'Not Verified' %}</span>
                                        {% endif %}
                                    </div>
                                    {% if not request.user.email_verified %}
                                        <a class="pull-right verify-link">{% trans 'Send verification email' %}</a>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="form-group">{# old pwd #}
                                <label for="old_password" class="col-sm-4 control-label">{% trans 'Old Password' %}</label>
                                <div class="col-sm-8">
                                    <input class="form-control" id="old_password" name="old_password" type="password" placeholder="{% trans 'Needed when changing password' %}">
                                </div>
                            </div>
                            <div class="form-group">{# new pwd #}
                                <label for="new_password" class="col-sm-4 control-label">{% trans 'New Password' %}</label>
                                <div class="col-sm-8">
                                    <input class="form-control" id="new_password" name="new_password" type="password">
                                </div>
                            </div>
                            <div class="form-group">{# pwd confired #}
                                <label for="password_again" class="col-sm-4 control-label">{% trans 'Password Confirmation' %}</label>
                                <div class="col-sm-8">
                                    <input class="form-control" id="password_again" name="password_again" type="password">
                                </div>
                            </div>
                            <div class="form-group">{# save #}
                                <label class="col-sm-4 control-label"></label>
                                <div class="col-sm-8" style="text-align: center">
                                    <button class="btn btn-primary" id="login-button" type="submit">{% trans 'Save' %}</button>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="tab-pane" id="avatar">
                        <div class="col-sm-6 avatar-content">
                            <div id="preview-area" class="panel panel-default">
                                <p style="margin: 0 auto">{% trans 'Preview' %}</p>
                            </div>
                            <input type="file" id="avatar-input" accept="image/*">
                            <button id="choose-button" class="btn center-block btn-primary">
                                {% trans 'Choose Image' %}
                                <i class="fa fa-mouse-pointer" aria-hidden="true"></i>
                            </button>
                        </div>

                        <div class="col-sm-6">
                          <div id="avatar-wrapper">

                          </div>
                        </div>

                        <p class="text-center">
                            <button data-username="{{ request.user.username }}" id="set-avatar" disabled="disabled"
                                  class="btn btn-lg btn-success">{% trans 'Set Avatar' %}
                            </button>
                        </p>
                    </div>{# avatar tab-pane #}

                    <div class="tab-pane" id="unread">
                        <div id="unread-group">
                          <!--待填充通知-->
                        </div>
                        <div class="paginator-wrapper text-center">
                          <ul id="unread-paginator">
                          </ul>
                        </div>
                    </div>

                    <div class="tab-pane" id="read">
                        <div id="read-group">
                          <!--待填充通知-->
                        </div>
                        <div class="paginator-wrapper text-center">
                          <ul id="read-paginator">
                          </ul>
                        </div>
                    </div>{# avatar tab-pane #}

                </div>{# tab-content #}
                </div>{# profile-content #}
            </div>{# col-9 #}
        </div>{# content row #}
    </div>{# content #}

    <input type="hidden" id="notifications" name="notifications" value="{{ notifications }}">

</div>{# container #}
{% endblock %}


{% block pageFootExtra %}
    <script src="{% static 'js/accounts/my_info.js' %}"></script>
    <script src="{% static 'js/vendor/bootstrap-paginator.js' %}"></script>
    <script src="{% static 'js/vendor/formValidation.min.js' %}"></script>
    <script src="{% static 'js/vendor/formValidation.bootstrap.min.js' %}"></script>
    <link href="https://cdn.bootcss.com/croppie/2.5.1/croppie.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/croppie/2.5.1/croppie.min.js"></script>
{% endblock %}
